<template>
  <div>
    <h2>每日访客统计</h2>
    <div id="chartfour" class="four"></div>
  </div>
</template>
    
    <script setup>
import { inject, onMounted, reactive } from "vue";
import link from "../api/link";
import url from "../api/urls";

let $echarts = inject("echarts");
function randomHexColor() {
  //随机生成十六进制颜色
  var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
  while (hex.length < 6) {
    //while循环判断hex位数，少于6位前面加0凑够6位
    hex = "0" + hex;
  }
  return "#" + hex; //返回‘#'开头16进制颜色
}

//判断颜色
const colorchange = (sname) => {
  if (sname == "外卖") {
    return [
      {
        offset: 0,
        color: randomHexColor(),
      },
      {
        offset: 1,
        color: randomHexColor(),
      },
    ];
  }
  if (sname == "快递") {
    return [
      {
        offset: 0,
        color: randomHexColor(),
      },
      {
        offset: 1,
        color: randomHexColor(),
      },
    ];
  }
  if (sname == "一般访客") {
    return [
      {
        offset: 0,
        color: randomHexColor(),
      },
      {
        offset: 1,
        color: randomHexColor(),
      },
    ];
  }
  if (sname == "授权访客") {
    return [
      {
        offset: 0,
        color: randomHexColor(),
      },
      {
        offset: 1,
        color: randomHexColor(),
      },
    ];
  }
};

onMounted(() => {
  let myChart = $echarts.init(document.getElementById("chartfour"));
  link(url.chartDataTwo).then((res) => {
    // console.log(res.data);
    let numkeys = Object.keys(res.data.num);
    // console.log(numkeys);
    let datas = [];
    for (const key in res.data.num) {
      datas.push({
        name: key,
        type: "line",
        stack: "Total",
        smooth: true,
        lineStyle: {
          width: 0,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.5,
          color: new $echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            colorchange(key)
          ),
        },
        emphasis: {
          focus: "series",
        },
        data: res.data.num[key],
      });
    }
    const option = {
      color: ["#80FFA5", "#EC732E", "#D737CC", "#FF0087"],
      title: {
        text: "",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: numkeys,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: res.data.day,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: datas,
      toolbox: {
        y: -30,
        show: true,
      },
    };

    myChart.setOption(option);
  });
});
</script>
    
    <style lang="scss" scoped>
h2 {
  height: 22px;
  color: #fff;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}
.four {
  height: 300px;
}
</style>